<template>
	<div class="home">
		<!-- 首页轮播 -->
		<home-swipe :carouselList="carouselList"></home-swipe>

		<!-- 首页功能快捷入口 Grid宫格-->
		<home-enter></home-enter>

		<!-- 商品推荐 -->
		<home-goods :goodsList="recommendGoodsList" title="商品推荐"></home-goods>

		<!-- 新品上架 -->
		<home-goods :goodsList="newGoodsList" title="新品上架"></home-goods>

		<!-- 销售排行 -->
		<home-goods :goodsList="hotGoodsList" title="销售排行"></home-goods>
	</div>
</template>

<script>
	//导入封装后的首页接口
	import * as homeAPI from "@/api/home.js"
	import homeSwipe from "./components/homeSwipe.vue"
	import homeEnter from "./components/homeEnter.vue"
	import homeGoods from "./components/homeGoods.vue"

	export default {
		name: 'home',
		components: {
			homeSwipe,
			homeEnter,
			homeGoods
		},

		data() {
			return {
				carouselList: [], //轮播图
				recommendGoodsList: [], //商品推荐		
				newGoodsList: [], //新品上架		
				hotGoodsList: [], //销售排行		
			}
		},

		// 生命周期钩子-实例创建后,可以用this.*
		onLoad() {
			//2.使用封装后的接口
			homeAPI.getHomeData().then(result => {
				console.log(result); //控制台调式输出
				this.carouselList = result.data.carouselList; //保存API调用的返回的轮播数据			
				this.recommendGoodsList = result.data.recommendGoodsList; //保存首页商品推荐数据
				this.newGoodsList = result.data.newGoodsList; //保存首页新品上架	数据
				this.hotGoodsList = result.data.hotGoodsList; //保存首页销售排行数据				
			});
		},
	}
</script>
<style scoped>
</style>